<template>
  <div>
    <h5 class="text-muted">当前任务：已受理项目列表</h5>
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          clearable
          auto-top
          placeholder="所属地"
          @change="getData()"
        ></select-address>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="params.customer_name"
          @keyup.enter.native="getData()"
          :clearable="true"
          placeholder="主体名称查询"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="params.lender_idcard"
          :clearable="true"
          placeholder="身份证号码"
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
    >
      <template v-slot:agency="scope">
        {{ setAgencyName(scope.row) }}
      </template>
      <template v-slot:time="scope">
        {{ setTime(scope.row) }}
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      :before-close="handleCreditClose"
      top="30px"
      width="80%"
    >
      <credit-file :query-id="queryId"></credit-file>
    </el-dialog>

    <el-dialog
      :visible.sync="visible"
      :close-on-click-modal="false"
      title="机构信息"
      top="10%"
      width="600px"
    >
      <div class="card text-indent" v-loading="dialogLoading">
        <div class="p-4">
          <p>机构名称： {{ agencyInfo.org_name }}</p>
          <p>联系人名称： {{ agencyInfo.real_name }}</p>
          <p>联系电话： {{ agencyInfo.phone_number }}</p>
          <p>地址： {{ agencyInfo.address }}</p>
          <p>受理时间： {{ agencyInfo.claim_time }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import { enumProjectType } from '@/gov/plugins/enum'
import CreditFile from '@/gov/components/creditFile/GovCredit'
export default {
  components: {
    SelectAddress,
    CreditFile,
  },
  props: {},
  data() {
    return {
      agencyInfo: {},
      order: {
        approved_date: 'desc',
        claim_time: 'desc',
      },
      loading: false,
      reportVisible: false,
      visible: false,
      dialogLoading: false,
      queryId: '',
      tableCount: 0,
      params: {
        index: 1,
        size: 10,
        'claim_status.neq': 2,
        'is_approval.neq': 2,
        'orWhere.claim_status.eq': 1,
        'orWhere.is_approval.eq': 1,
        'recommend_status.eq': 1,
        'submit_type.eq': 1,
        customer_name: '',
        lender_idcard: '',
        address_code: '',
      },
      tableName: 'customer_related',
      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '160px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address', minWidth: '160px' } },
        {
          attrs: { label: '项目类型', prop: 'project_type', align: 'center' },
          process: v => enumProjectType[v],
        },
        { attrs: { label: '负责人', prop: 'corp_name' } },
        { attrs: { label: '联系电话', prop: 'mobile_no' } },
        { attrs: { label: '申请金额', prop: 'apply_funds', align: 'center' } },
        { attrs: { label: '申请年限', prop: 'load_years', align: 'center' } },
        { attrs: { label: '受理时间', prop: 'recommend_time' }, slot: 'time' },
        { attrs: { label: '受理机构', align: 'center' }, slot: 'agency' },
        {
          attrs: { label: '操作', align: 'center', minWidth: '100px' },
          operations: [
            {
              content: '受理机构详情',
              icon: 'fa fa-search',
              event: this.handleDetail,
            },
            { content: '档案卡', icon: 'fa fa-file', event: this.handleView },
          ],
        },
      ],
      tableData: [],
    }
  },
  computed: {},
  watch: {
    $route(route, oldroute) {
      if (route.name === 'missionYclaim') {
        this.getData()
      }
    },
  },
  mounted() {},
  created() {
    this.params.address_code = this.$utils.getAddressCode()
    this.getData()
  },
  methods: {
    setAgencyName(row) {
      const date1 = this.$utils.dateFormat(row.approved_date, 'yyyy-MM-dd hh:mm:ss')
      const date2 = this.$utils.dateFormat(row.claim_time, 'yyyy-MM-dd hh:mm:ss')
      if (!row.approved_date) {
        return row.bank_name
      }
      if (!row.claim_time) {
        return row.service_name
      }
      return date1 > date2 ? row.bank_name : row.service_name
    },
    setAgency(row) {
      const date1 = this.$utils.dateFormat(row.approved_date, 'yyyy-MM-dd hh:mm:ss')
      const date2 = this.$utils.dateFormat(row.claim_time, 'yyyy-MM-dd hh:mm:ss')
      if (!row.approved_date) {
        return row.bank_id
      }
      if (!row.claim_time) {
        return row.service_id
      }
      return date1 > date2 ? row.bank_id : row.service_id
    },
    setTime(row) {
      const date1 = this.$utils.dateFormat(row.approved_date, 'yyyy-MM-dd hh:mm:ss')
      const date2 = this.$utils.dateFormat(row.claim_time, 'yyyy-MM-dd hh:mm:ss')
      if (!row.approved_date) {
        return date2
      }
      if (!row.claim_time) {
        return date1
      }
      return date1 > date2 ? date2 : date1
    },
    handleView(row) {
      this.queryId = row.customer_related_id
      this.reportVisible = true
    },
    handleDetail(row) {
      this.visible = true
      this.agencyInfo = {}
      this.agencyId = this.setAgency(row)
      if (!this.agencyId) {
        return
      }
      this.dialogLoading = true
      this.$api
        .getData(this.$serviceName, 'credit_agency_view', { 'client_id.eq': this.agencyId })
        .then(res => {
          this.agencyInfo = (res && res.data && res.data[0]) || {}
          this.agencyInfo.claim_time = this.setTime(row)
        })
        .finally(() => {
          this.dialogLoading = false
        })
    },
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          this.tableData = res && res.data && res.data.data
          this.tableCount = (res && res.data && res.data.totalCount) || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCreditClose() {
      this.reportVisible = false
      this.getData(this.params.index)
    },
  },
}
</script>
<style lang="scss" scoped>
.text-indent {
  font-size: 1.2rem;
  min-height: 150px;
  padding: 10px;
}
</style>
